<template>
    <el-form :inline="true" :model="formdata" class="demo-form-inline">
        <el-form-item label="商品名称">
            <el-input v-model="formdata.name" placeholder="根据商品名称查询" clearable />
        </el-form-item>
        <el-form-item label="商品编号">
            <el-input v-model="formdata.id" placeholder="根据商品ID查询" clearable />
        </el-form-item>
        <el-form-item label="批量查询">
            <el-input v-model="formdata.ids" placeholder="根据商品ID批量查询" clearable />
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
    </el-form>
    <!--列表管理-->
    <el-table :data="ProductList" style="width: 100%">
        <el-table-column fixed prop="id" label="编号" width="70" />
        <el-table-column prop="name" label="商品名称" width="100" />
        <el-table-column prop="subName" label="商品标题" width="140" />
        <el-table-column prop="price" label="商品价格" width="100" />
        <el-table-column prop="status" label="当前状态" width="90" />
        <el-table-column prop="statusX" label="售卖状态" width="90" />
        <el-table-column prop="seq" label="商品排序" width="90" />
        <el-table-column prop="lastUpdateTime" label="最近上线时间" width="120" />
        <el-table-column fixed="right" label="操作" min-width="150">
            <template #default>
                <el-button type="danger" size="small" @click="handleClick">
                    下线
                </el-button>
                <el-button type="warning" size="small">修改</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination  :page-size="pageData.pageSize"
        background layout="total, prev, pager, next" :total="pageData.total" 
        @current-change="handleCurrentChange" />
</template>
<script lang="ts" setup>
//引入api接口
import { ProductApi } from '@/api'
import { ref,reactive, onMounted } from 'vue'
const ProductList = ref([
    {
        date: '2016-05-03',
        name: 'Tom',
        state: 'California',
        city: 'Los Angeles',
        address: 'No. 189, Grove St, Los Angeles',
        zip: 'CA 90036',
        tag: 'Home',
    },
    {
        date: '2016-05-02',
        name: 'Tom',
        state: 'California',
        city: 'Los Angeles',
        address: 'No. 189, Grove St, Los Angeles',
        zip: 'CA 90036',
        tag: 'Office',
    },
    {
        date: '2016-05-04',
        name: 'Tom',
        state: 'California',
        city: 'Los Angeles',
        address: 'No. 189, Grove St, Los Angeles',
        zip: 'CA 90036',
        tag: 'Home',
    },
]) 

const formdata = reactive({
    name: '',
    id: '',
    ids: [],
})
//分页
const pageData=reactive({
    total: 20,
    pageSize: 4, //每页显示的数据
    pageNum:1 // 当前页码
   
})

onMounted(() => {
    //回调函数
    callproduct();
})

const callproduct = () => { 
    let name = formdata.name === "" ? undefined : formdata.name;
    let id = formdata.id === "" ? undefined : formdata.id;
    let ids = formdata.ids[0] ===''  ? undefined : formdata.ids;
    ProductApi.select.call({
        name: name, id: id, ids: ids,
        pageNum: pageData.pageNum,
        pageSize: pageData.pageSize
        
    }).then((res: any) => { 
        console.log(res);
        ProductList.value =res.items
        pageData.total = res.total
    })

}
const handleCurrentChange = (val: number) => {
    console.log(`current page: ${val}`)
    pageData.pageNum = val
    //回调函数实现页面数据展示
    callproduct()
}


const onSubmit = () => {
    console.log('submit!')
    //回调接口数据
    callproduct()
}
const handleClick = () => {
    console.log('click')
}
</script>